<div *nzModalTitle> {{ isEdit ? ('mxk.text.edit' | i18n) : ('mxk.text.add' | i18n) }} </div>
<div>
    <form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit($event)" se-container="1">
        <nz-form-item>
            <nz-form-label [nzMd]="6" nzFor="id">{{ 'mxk.text.id' | i18n }}</nz-form-label>
            <nz-form-control [nzMd]="18" nzErrorTip="The input is not valid id!">
                <input [(ngModel)]="form.model.id" disabled="{{ isEdit }}" [ngModelOptions]="{ standalone: true }"
                    nz-input name="id" id="id" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzMd]="6" nzFor="name" nzRequired>{{ 'mxk.connectors.name' | i18n }}</nz-form-label>
            <nz-form-control [nzMd]="18" nzErrorTip="The input is not valid name!">
                <input [(ngModel)]="form.model.name" [ngModelOptions]="{ standalone: true }" nz-input name="name"
                    id="name" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzMd]="6" nzFor="type" nzRequired>{{ 'mxk.connectors.type' | i18n }}</nz-form-label>
            <nz-form-control [nzMd]="18" nzErrorTip="The input is not valid type!">
                <nz-select [(ngModel)]="form.model.type" [ngModelOptions]="{ standalone: true }">
                    <nz-option nzValue="mysql" nzLabel="mysql"></nz-option>
                    <nz-option nzValue="mariadb" nzLabel="mariadb"></nz-option>
                    <nz-option nzValue="postgresql" nzLabel="postgresql"></nz-option>
                    <nz-option nzValue="sqlserver" nzLabel="sqlserver"></nz-option>
                    <nz-option nzValue="oracle" nzLabel="oracle"></nz-option>
                    <nz-option nzValue="db2" nzLabel="db2"></nz-option>
                    <nz-option nzValue="hive" nzLabel="hive"></nz-option>
                    <nz-option nzValue="greenplum" nzLabel="greenplum"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzMd]="6" nzFor="driver" nzRequired>{{ 'mxk.connectors.driver' | i18n }}</nz-form-label>
            <nz-form-control [nzMd]="18" nzErrorTip="The input is not valid driver!">
                <textarea nz-input [(ngModel)]="form.model.driver" [ngModelOptions]="{ standalone: true }"
                    placeholder="jdbc driver class name" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="url">{{ 'mxk.connectors.url' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid url!">
                <textarea nz-input [(ngModel)]="form.model.url" [ngModelOptions]="{ standalone: true }"
                    placeholder="database connection URL" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">{{ 'mxk.connectors.username' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                nzErrorTip="The input is not valid username!">
                <input [(ngModel)]="form.model.username" [ngModelOptions]="{ standalone: true }" nz-input
                    name="username" id="username" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">{{ 'mxk.connectors.password' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                nzErrorTip="The input is not valid password!">
                <input type="password" [(ngModel)]="form.model.password" [ngModelOptions]="{ standalone: true }"
                    nz-input name="password" id="password" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="status">{{ 'mxk.text.status' | i18n }}
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid status!">
                <nz-switch [(ngModel)]="form.model.switch_status" [ngModelOptions]="{ standalone: true }" name="status"
                    [nzCheckedChildren]="checkedTemplate" [nzUnCheckedChildren]="unCheckedTemplate"></nz-switch>
                <ng-template #checkedTemplate><i nz-icon nzType="check"></i></ng-template>
                <ng-template #unCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
            </nz-form-control>
        </nz-form-item>
    </form>
</div>

<div *nzModalFooter>
    <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
    <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
</div>